<template>
    <div class="flex h-[calc(100vh-60px)]">
        <!-- 左侧工作台 - 可折叠 -->
        <WorkBench v-model:collapsed="leftCollapsed" @update:collapsed="leftCollapsed = $event" />

        <!-- 中间3D画布区 - 自适应宽度 -->
        <Canvas3D />

        <!-- 右侧历史面板 - 可折叠 -->
        <HistoryPanel v-model:collapsed="rightCollapsed" @update:collapsed="rightCollapsed = $event" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import WorkBench from './component/WorkBench.vue'
import Canvas3D from './component/Canvas3D.vue'
import HistoryPanel from './component/HistoryPanel.vue'

// 折叠状态管理
const leftCollapsed = ref(false)
const rightCollapsed = ref(false)


</script>

<style scoped>
/* 确保布局占满可用高度 */
.flex {
    min-height: 0;
    /* 允许flex子项收缩 */
}
</style>